{extend name="iframe" /}

{block name="body"}
<div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list" style="padding: 20px 30px 0 0;">
    <form action="{:request()->url()}" method="post" class="xn_ajax2" data-type="open" enctype="multipart/form-data">
        <blockquote class="layui-elem-quote layui-quote-nm">
            <div class="layui-form-item">
                <label class="layui-form-label">项目</label>
                <div class="layui-input-block" id="tags-xiangmu">
                    <div class="layui-inline">
                        <button type="button" class="layui-btn layui-btn-normal" style="background-color: #{:randColor()};">{项目名称}词缀</button>
                    </div>
                    <div class="layui-inline">
                        <button type="button" class="layui-btn layui-btn-normal" style="background-color: #{:randColor()};">词缀{项目名称}词缀</button>
                    </div>
                </div>
            </div>
            <div id="box-xiangmu">
            </div>
        </blockquote>

        <blockquote class="layui-elem-quote layui-quote-nm">
            <div class="layui-form-item">
                <label class="layui-form-label">大类</label>
                <div class="layui-input-block" id="tags-dalei">
                    <div class="layui-inline">
                        <button type="button" class="layui-btn layui-btn-normal" style="background-color: #{:randColor()};">{大类}词缀</button>
                    </div>
                    <div class="layui-inline">
                        <button type="button" class="layui-btn layui-btn-normal" style="background-color: #{:randColor()};">词缀{大类}词缀</button>
                    </div>
                </div>
            </div>
            <div id="box-dalei">
            </div>
        </blockquote>

        <blockquote class="layui-elem-quote layui-quote-nm">
            <div class="layui-form-item">
                <label class="layui-form-label">小类</label>
                <div class="layui-input-block" id="tags-xiaolei">
                    <div class="layui-inline">
                        <button type="button" class="layui-btn layui-btn-normal" style="background-color: #{:randColor()};">{小类}词缀</button>
                    </div>
                    <div class="layui-inline">
                        <button type="button" class="layui-btn layui-btn-normal" style="background-color: #{:randColor()};">词缀{小类}词缀</button>
                    </div>
                </div>
            </div>
            <div id="box-xiaolei">
            </div>
        </blockquote>
        
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" lay-submit class="layui-btn">保存</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
{/block}
{block name="js"}
<script>
    var tags_xiangmu = $('#tags-xiangmu').find('button');
    $.each(tags_xiangmu,function(index,item){
        $(item).click(function(){
            var str = $(this).text();
            addDiv(str,'xiangmu')
        });
    });

    var tags_dalei = $('#tags-dalei').find('button');
    $.each(tags_dalei,function(index,item){
        $(item).click(function(){
            var str = $(this).text();
            addDiv(str,'dalei')
        });
    });

    var tags_xiaolei = $('#tags-xiaolei').find('button');
    $.each(tags_xiaolei,function(index,item){
        $(item).click(function(){
            var str = $(this).text();
            addDiv(str,'xiaolei')
        });
    });

    function addDiv(str,name){
        var html = getHtml(str,name);
        $('#box-'+name).append(html)
    }

    function getHtml(str,name){
        var html = '<div class="layui-form-item">\
                        <label class="layui-form-label"></label>\
                        <div class="layui-input-inline" style="width: 500px;">\
                            <input type="text" name="'+name+'[]" placeholder="" autocomplete="off" class="layui-input" value="'+str+'">\
                        </div>\
                        <button type="button" class="layui-btn layui-btn-danger" onclick="removeDiv(this)">移除</button>\
                    </div>';
        return html;
    }

    function removeDiv(obj){
        $(obj).parent().remove();
    }
</script>
{/block}